<!-- 根组件，定义整体布局（上下栏、左右布局） -->
<template>  
  <el-container class="app-wrapper">
    <!-- 顶部Header -->
    <el-header class="header-container">
    <layout-header />
    </el-header>
    <!-- 中间容器（侧边栏 + 主内容） -->
    <el-container class="main-container">
      <!-- 左侧Sidebar -->
      <el-aside width="220px">
      <layout-sidebar />
      </el-aside>

      <!-- 右侧主内容区域 -->
      <el-main  class="content-wrapper">
      <router-view /> <!-- 这里是页面切换的地方，会渲染Dashboard等组件 -->
      </el-main>
    </el-container>
  </el-container>
</template>

<script>  
import LayoutHeader from './components/layout/LayoutHeader.vue'
import LayoutSidebar from './components/layout/LayoutSidebar.vue'

export default {  
  name: 'App',
  components: {
    LayoutHeader,
    LayoutSidebar
  }
}
</script>
<style> 
.app-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  /*background: rgba(255, 0, 0, 0.1);  半透明红色背景，方便看到容器边界 */
  /*overflow-x: auto;  显示横向滚动条，方便观察溢出部分 */

}
/* 中间容器：占满剩余高度 + 强制宽度100% */
.main-container {
  width: 100%;
  height: calc(100vh - 60px); /* 减去顶部栏高度 */
  display: flex; /* 显式启用Flex布局 */
}

/* 侧边栏：保持固定宽度，折叠时会自动变化 */
.el-aside {
  flex-shrink: 0; /* 防止侧边栏被压缩 */
}

/* 主内容区：强制占满剩余宽度 */
.content-wrapper {
  flex: 1; /* 核心：占满剩余宽度，无论内容多少 */
  width: 100%; /* 保底宽度 */
  padding: 20px;
  box-sizing: border-box; /* 避免padding撑大容器 */
  overflow-x: hidden; /* 隐藏主内容区的横向滚动条 */
}
</style>

